<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_Vue实例_生命周期</title>
</head>
<body>
<!--
1.Vue对象的生命周期
    1)初始化显示
    beforeCreate()
    created()
    beforeMount()
    mounted()
    2)更新状态
    beforeUpdate()
    updated()
    3)销毁Vue实例，vm.$destroy()
    beforeDestroy()
    destroyed()


2.常用的生命周期方法，
    created()/mounted(): 发送ajax请求，启动定时器
    beforeDestory():做收尾工作，比如清除定时器
-->

<div id="example">
    <button @click="destoryVM"> destroy vm</button>
    <p v-show="isShow">生命周期测试</p>
    {{isShow}}
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm =new Vue({
    el:'#example',
    data:{
        isShow:true
    },
    //2初始化阶段
    beforeCreate(){
        console.log("beforeCreate")
    },
    created (){
        console.log("created")
    },
    beforeMount(){
        console.log("beforeMount")
    }
    ,
    mounted(){//初始化显示之后立即调用
        console.log("mounted")
        this.IntervalId=setInterval(() =>{
            console.log("----")
            this.isShow= !this.isShow
        },1000)
    },
    //2更新
    beforeUpdate(){
    console.log("beforeUpdate")
    },
    updated (){
        console.log("Updated")
    },
    //3.死亡阶段
    beforeDestroy(){
    console.log("死亡之前干的事")
    //清除定时器
    clearInterval(this.IntervalId);
    },
    destroyed(){
        console.log("死亡le")
    },

    methods:{
        destoryVM(){
            //销毁vm
            this.$destroy()
            return;
        }
    }
})



</script>


</body>
</html>